<script lang="ts" setup>
  import {
    Button,
    Avatar,
    // Carousel,
    // CarouselItem,
    // Tag,
    Card,
  } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { useUserStore } from '../store/modules/user';
  import roundImg from '/@/assets/pins/正常小球.svg';
  import UserModal from '/@/components/Connect/src/UserModal.vue';
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);

  const visibleRef = ref(false);

  function openModal() {
    visibleRef.value = true;
  }
</script>
<template>
  <!-- 个人简介 -->
  <card :bordered="false" size="small">
    <!-- <template #cover> -->
    <div class="user-card box-border !flex">
      <avatar v-if="!userInfo" :size="58"><icon-user /> </avatar>

      <avatar
        :size="58"
        class="relative mr-[12px] flex items-center justify-center border border-solid border-[rgba(0,0,0,0.2)] bg-transparent"
        v-if="userInfo"
      >
        <img alt="avatar" :src="userInfo?.icon" />
        <img
          class="absolute w-[8px] h-[8px] top-[-1px] right-[10px]"
          :src="roundImg"
          alt=""
          srcset=""
        />
      </avatar>
      <div class="w-[calc(100%-76px)] user-info">
        <Button
          type="text"
          class="font-bold text-[16px] mt-[3px]"
          v-if="!userInfo"
          @click="openModal"
          >登录/注册</Button
        >
        <div class="text-[12px] font-[500] text-[#515767] pl-[17px]" v-if="!userInfo"
          >即刻玩转极星</div
        >
        <div class="text-[18px] font-bold">
          <span>{{ userInfo?.name }}</span>
        </div>
        <div class="user-desc leading-[30px]"> {{ userInfo?.introduce }} </div>
      </div>
    </div>
    <div class="px-[4px] flex items-center justify-between mt-[4px]" v-if="userInfo">
      <Button type="outline" :style="{ borderRadius: '4px', padding: '0 26px' }"
        ><a href="/editor/drafts/new" target="_blank">写文章</a></Button
      >
      <Button type="primary" :style="{ borderRadius: '4px', padding: '0 26px' }"
        ><RouterLink to="/pins">写沸点</RouterLink></Button
      >
    </div>
    <div class="flex items-center pt-[14px] box-border">
      <div class="w-[25%] text-center">
        <span class="text-[18px] font-bold my-1 text-[rgba(0,0,0,0.5)]" v-if="!userInfo">-</span>
        <span class="block text-[18px] font-bold my-1" v-else>32</span>
        <span class="block text-[rgba(0,0,0,0.5)]">星点</span>
      </div>
      <div class="w-[25%] text-center">
        <span class="text-[18px] font-bold my-1 text-[rgba(0,0,0,0.5)]" v-if="!userInfo">-</span>
        <span class="block text-[18px] font-bold my-1" v-else>32</span>
        <span class="block text-[rgba(0,0,0,0.5)]">文章</span>
      </div>
      <div class="w-[25%] text-center">
        <span class="text-[18px] font-bold my-1 text-[rgba(0,0,0,0.5)]" v-if="!userInfo">-</span>
        <span class="block text-[18px] font-bold my-1" v-else>32</span>
        <span class="block text-[rgba(0,0,0,0.5)]">关注</span>
      </div>
      <div class="w-[25%] text-center">
        <span class="text-[18px] font-bold my-1 text-[rgba(0,0,0,0.5)]" v-if="!userInfo">-</span>
        <span class="block text-[18px] font-bold my-1" v-else>32</span>
        <span class="block text-[rgba(0,0,0,0.5)]">粉丝</span>
      </div>
    </div>
    <div class="px-[4px] flex justify-center mt-[20px]" v-if="userInfo">
      <Button type="primary" long :style="{ borderRadius: '4px' }"
        ><RouterLink to="/creator">进入创作中心<IconDoubleRight /></RouterLink
      ></Button>
    </div>
  </card>
  <UserModal v-model:visible="visibleRef" />
</template>
